<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog"
             title="排名情况"
             append-to-body width="1100px">
    <div class="head-container" style="margin-top:-15px" >
      <el-date-picker style="width: 400px;" class="filter-item" size="small"
      		v-model="timeValue"
           @change="handleDateChange"
      		type="daterange"
      		value-format="yyyy-MM-dd"
      		range-separator="至"
      		start-placeholder="开始日期"
      		end-placeholder="结束日期">
      </el-date-picker>
      <treeselect v-model="deptId" class="filter-item treeselect-main"
       @input="deptIdChange"
       :disableBranchNodes="false"
       :default-expand-level="2"
      :options="depts"  placeholder="选择部门" />
      <el-input v-model="userName" clearable @clear="init" placeholder="输入姓名搜索" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="init">搜索</el-button>
    </div>
    <transition name="el-fade-in-linear">
    	<div class="ranking-box"  v-loading="loading">
    		<div class="top dl-row">
    			<div class="number">排名</div>
    			<div class="name">姓名</div>
    			<div class="timeWidth">检测时间</div>
    			<div class="user-score" style="padding-left: -20px;">&nbsp;&nbsp;得分&nbsp;&nbsp;</div>
    		</div>
    		<ul class="score-main" style="overflow:auto">
    			<li class="dl-row center"
    				v-for="(rank,rankIndex) in data"
    				:key="rankIndex">
    				<div class="number first">
    					<!-- <img :src="firstImg" v-if="rankIndex===0">
    					<img :src="secondImg" v-else-if="rankIndex===1">
    					<img :src="thirdImg" v-else-if="rankIndex===2">
    					<p v-else>{{rank.rank}}</p> -->
              <span>{{rank.rank}}</span>
    				</div>
    				<div class="name dl-row center">
    					<span>{{rank.userName}}</span>
    				</div>
    				<div class="timeWidth center">
    					<span>{{parseTime(rank.createTime)}}</span>
    				</div>
    				<div class="user-score center">
              <span>{{rank.score}}</span>
            </div>
    			</li>
    		</ul>
    	</div>
    </transition>
    <el-pagination
    		:total="total"
    		:current-page="page + 1"
    		style="margin-top: 8px;"
    		layout="total, prev, pager, next, sizes"
    		@size-change="sizeChange"
    		@current-change="pageChange"/>
  </el-dialog>
</template>

<script>
	import initData from '@/mixins/initData'
  import { getDepts } from '@/api/framework/system/dept'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	import { parseTime } from '@/utils/index'
	export default {
	    mixins: [initData],
      components: {Treeselect},
	    data() {
        return {
          loading:false,
          dialog:false,
          timeValue:[],
          depts: [],
          deptId:null,
          bankId: '',
          userName:'',
          rankList:[],
          firstImg: require('../../../assets/image/first.png'),
          secondImg: require('../../../assets/image/second.png'),
          thirdImg: require('../../../assets/image/third.png'),
        }
	    },
		watch: {
		  'bankId': {
		    handler: function (newVal, oldVal) {
				this.bankId=newVal;
				this.init()
		    },
		    deep: true
		  }
		},
    created() {
      this.$nextTick(() => {
        this.getDepts()
      })
    },
	    methods: {
        parseTime,
	      beforeInit() {
	        this.url = 'practice/bank-list'
	        this.params = {
            page: this.page,
            size: this.size,
            bankId: this.bankId,
            userName:this.userName,
            deptId:this.deptId
				 }
         if(this.timeValue!=null && this.timeValue.length>=2){
         	this.params.startTime=this.timeValue[0]
         	this.params.endTime=this.timeValue[1]
         }
	        return true
	      },
        handleDateChange(val) {
          if (!val) {
            this.timeValue = null;
            this.init()
          }
        },
        getDepts() {
          getDepts({ enabled: true }).then(res => {
            this.depts = res.content
          })
        },
        deptIdChange(val){
          if (!val) {
            this.deptId = null;
            this.init()
          }
        },
        cancel() {
          this.dialog = false
        },
	    }
	}
</script>

<style scoped>
  .ranking-box{
    background: #F6F6F6;
    border-radius: 5px 5px 5px 5px;
    padding: 20px;
    .number{
      width: 10%;
      text-align: center;
    }
    .timeWidth{
      width: 50%;
      text-align: center;
    }
    .name{
      width: 20%;
      text-align: left;
      margin-left: 10%;
    }
    .user-score{
      width: 20%;
      text-align: center;
    }
    .top{
      color: #999999;
      line-height: 14px;
      margin-bottom: 20px;
    }
    .score-main{
      height: 230px;
      overflow:auto;
      li{
        height: 32px;
        margin-bottom: 15px;
      }
      .number{
        color: #999999;
        img{
          width: 20px;
        }
      }
      .first{
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
      .name{
        img{
          width: 32px;
          height: 32px;
          margin-right: 10px;
        }
        h1{
          font-size: 14px;
          color: #333333;
          margin-right: 10px;
        }
        p{
          background: #FFFFFF;
          border-radius: 13px 13px 13px 13px;
          padding: 0 15px;
          color: #0068B6;
          font-size: 12px;
          line-height: 26px;
        }
      }
      .user-score{
        font-size: 14px;
        font-weight: bold;
        color: #333333;
        padding-left: 20px;
      }
    }
  }
  .dl-row {
    display: flex;
    flex-direction: row;
    }
    .number img{
      width: 20px;
      height: 20px;
    }
     .score-main li{
      height: 22px;
      margin-bottom: 10px;
    }

    .el-range-editor--small.el-input__inner {
        height: 31px;
    }
    .treeselect-main {
        margin-top: 1px;
        line-height: 29px;
        width: 200px;
        .vue-treeselect__placeholder {
          line-height: 29px;
        }
        .vue-treeselect__control {
          height: 29px;
        }
      }
</style>
